<template>  
  <view class="dashboard-container">  

    <!-- 按钮区域 -->  
    <view class="action-buttons">  
	
      <button  
        class="button"  
        :class="{ active: activeSection === 'taskRegistration' }"  
        @tap="navigateToSection('taskRegistration')"  
		v-if="checkPerms('business:business:query')" 
      >  
        任务单登记  
      </button>  
      <button  
        class="button"  
        :class="{ active: activeSection === 'taskExamine' }"  
        @tap="navigateToSection('taskExamine')" 
		 v-if="checkPerms('business:business:examine')" 
      >  
        任务单审核  
      </button>  
      <button  
        class="button"  
        :class="{ active: activeSection === 'samplingMonitoring' }"  
        @tap="navigateToSection('samplingMonitoring')"  
		 v-if="checkPerms('client:sampling:list')" 
      >  
        采样监测业务  
		</button>  
		<button  
		  class="button"  
		  :class="{ active: activeSection === 'calender' }"  
		  @tap="navigateToSection('calender')"  
				 v-if="checkPerms('client:sampling:list')" 
		>  
		日历展示
      </button>  
	  
      <button  
        class="button"  
        :class="{ active: activeSection === 'sampleTransport' }"  
        @tap="navigateToSection('sampleTransport')"  
		 v-if="checkPerms('client:samplingupload:list')" 
      >  
        传输采样检测  
      </button>  
      <button  
        class="button"  
        :class="{ active: activeSection === 'samplemanagement' }"  
        @tap="navigateToSection('samplemanagement')"  
		 v-if="checkPerms('client:samplemanagement:list')" 
      >  
        样品管理  
      </button>  
      <button  
        class="button"  
        :class="{ active: activeSection === 'experimentalAnalysis' }"  
        @tap="navigateToSection('experimentalAnalysis')"  
		 v-if="checkPerms('client:experimental:list')" 
      >  
        实验分析  
      </button>  
      <button  
        class="button"  
        :class="{ active: activeSection === 'monitoringReport' }"  
        @tap="navigateToSection('monitoringReport')"  
		 v-if="checkPerms('client:testreport:list')" 
      >  
        检测报告  
      </button>  
    </view>  
  </view>  
</template>  

<script>
	import {
		add,
		toExamine,
		list,
		examineList,
		update,
		submitTask,
		receiveTask,
		rejectTask,
		selectDeptTree,
		selectUserByDeptId,
		confirmeList,
		getTaskFiles,
		selectCcName,
		requestSubscribeMessage
	} from "@/api/mobilebusiness";
	import {
		wxLoginGetCode,
		queryAuthorize,
		queryPerms
	} from "@/api/system/wechat"
export default {  
  data() {  
    return {  
      activeSection: '', // 当前激活的按钮  
	  perms: '', // 提供一个默认字符串 
    };  
  },  
  onLoad() {
  	this.queryPerms();
  	// this.queryAuthorize();    //本地测试可以注释掉
  },
  methods: {  
	  queryPerms() {
	  	queryPerms().then(response => {  
	  	    console.log("queryAuthorize + response:==" + response);  
	  	    // 确保 response 是数组，或者解析为数组  
	  	    this.perms = Array.isArray(response) ? response : JSON.parse(response);  
	  	    console.log("queryAuthorize + this.perms:==" + this.perms);  
			
			
	  	  });  
	  },
	checkPerms(perm) {  
		// 如果是管理员（admin），则跳过权限检查
		if (this.perms.includes("admin")) {
		  return true;
		}
	  if (!this.perms || !Array.isArray(this.perms)) {  
	    console.error("this.perms is not an array or is undefined");  
	    return false;  
	  }  
	  return this.perms.includes(perm);  
	},
	    // 导航到指定业务  
    navigateToSection(section) {  
      this.activeSection = section;  
      // uni.showToast({ title: `前往 ${section}`, icon: 'success' });  
	  if(this.activeSection=='taskRegistration'){//任务单登记 
		  uni.navigateTo({ url: `/pages/business/mobilebusiness/index`});    
	  }else if(this.activeSection=='taskExam9090ine'){//任务单审核
		   uni.navigateTo({ url: `/pages/business/taskExamine/index`});   
	  }else if(this.activeSection=='calender'){//任务单审核
		   	uni.navigateTo({ url: `/pages/business/calender/index`});   
	  }else if(this.activeSection=='samplingMonitoring'){//采样监测业务
		   uni.navigateTo({ url: `/pages/business/samplingMonitoring/index`});   
	  }else if(this.activeSection=='sampleTransport'){//传输采样检测
		   uni.navigateTo({ url: `/pages/business/sampleTransport/index`});   
	  }else if(this.activeSection=='samplemanagement'){//样品管理
		   uni.navigateTo({ url: `/pages/business/samplemanagement/index`});   
	  }else if(this.activeSection=='experimentalAnalysis'){//实验分析
		   uni.navigateTo({ url: `/pages/business/experimentalAnalysis/index`});   
	  }else if(this.activeSection=='monitoringReport'){//检测报告
		   uni.navigateTo({ url: `/pages/business/monitoringReport/index`});   
	  }
    },  
    // 返回按钮  
    handleBack() {  
      uni.navigateBack();  
    },  
    // 关闭按钮  
    handleClose() {  
      uni.switchTab({  
        url: '/pages/index/index', // 返回首页例子  
      });  
    },  
  },  
};  
</script>

<style scoped>  
/* 页面容器 */  
.dashboard-container {  
  padding: 20rpx;  
  background-color: #f9f9f9;  
  min-height: 100vh;  
  box-sizing: border-box;  
}  

/* 顶部导航栏 */  
.top-bar {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20rpx;  
  background-color: #409eff;  
  color: #fff;  
  border-radius: 8rpx;  
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
}  

.icon-back,  
.icon-close {  
  width: 36rpx;  
  height: 36rpx;  
}  

.title {  
  font-size: 32rpx;  
  font-weight: bold;  
  flex: 1;  
  text-align: center;  
  margin: 0 16rpx;  
  color: #fff;  
}  

/* 按钮区域 */  
.action-buttons {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
  margin-top: 20rpx;  
  gap: 20rpx;  
}  

.button {  
  flex: 1 0 calc(50% - 30rpx); /* 每行显示两个按钮 */  
  height: 120rpx;  
  line-height: 120rpx;  
  background-color: #ffffff;  
  color: #606266;  
  border-radius: 16rpx;  
  text-align: center;  
  font-size: 28rpx;  
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);  
  transition: background-color 0.3s;  
}  

.button:hover {  
  background-color: #f2f6fc;  
}  

.button.active {  
  background-color: #409eff;  
  color: #ffffff;  
}  

.button.active:hover {  
  background-color: #66b1ff;  
}  

/* 响应式适配 */  
@media (max-width: 750rpx) {  
  .button {  
    flex: 1 0 100%; /* 小屏幕上每个按钮占满一行 */  
  }  
}  
</style>  
